<clr-modal [(clrModalOpen)]="modalOpened" [clrModalSize]="'lg'">
  <h3 class="modal-title">{{title}}</h3>
  <div class="modal-body">
    <form #ngForm="ngForm" clrForm clrLayout="horizontal">
      <clr-select-container>
        <label class="required">应用</label>
        <select id="app_id" clrSelect [(ngModel)]="configMap.appId" [disabled]="actionType==1" name="app_id">
          <option *ngFor="let app of apps" [ngValue]="app.id" [selected]="app.id === configMap.appId">{{app.name}}
          </option>
        </select>
      </clr-select-container>
   
      <clr-input-container>
        <label class="required">{{'TITLE.NAME' | translate}}</label>
        <input clrInput type="text" id="name" [(ngModel)]="configMap.name" name="name" size="32" required
          [readonly]="actionType==1" maxlength="32" pattern="[a-z]([-a-z0-9]*[a-z0-9])?" (keyup)='handleValidation()'>
          <clr-control-error>
            {{'RULE.REGEXT' | translate}}[a-z]([-a-z0-9]*[a-z0-9])?
          </clr-control-error>
      </clr-input-container>
    
      <div class="clr-form-control clr-row">
        <label class="clr-control-label">{{'TITLE.METADATA' | translate}}</label>
        <div class="clr-control-container clr-col-md-10 clr-col-12">
          <wayne-ace-editor-box></wayne-ace-editor-box>
        </div>
      </div>
  
      <clr-textarea-container>
        <label>{{'TITLE.DESCRIPTION' | translate}}</label>
        <textarea id="description" clrTextarea [(ngModel)]="configMap.description" name="description" rows="3">
                  </textarea>
      </clr-textarea-container>
    
      <div class="modal-footer">

        <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
        <button type="button" class="btn btn-primary" [disabled]="!isValid"
                (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
      </div>
    </form>
  </div>
</clr-modal>
